<template>
  <div class="login">
    <div>
      <div>
         <img src="../assets/logo.png" alt="">
      </div>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="pwd"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block class="btn" replace to="/home" native-type="submit">登录</van-button>
        <van-button round class="btn" replace to="/register" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped>
img{
  margin-left: 10%;
  width: 80%;
}
.btn{
  margin-left: 10%;
  width: 80%;
  font-size: 27px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
  background-image: url('../assets/bg-01.jpg');
}
</style>
<script>
export default {
   data() {
    return {
      username: '',
      pwd: '',
      pattern: /\d{6}/,
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
  },
}
</script>
<style lang="scss">
  .van-grid {
    .van-grid-item {
      .p{
        height: 25%;
        text-align: center;
    }
  }
}
</style>
